<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toggle0</title>
</head>
<style>
    #checkbox{
        display: none;
    }
    .toggle{
        position: relative;
        width: 40px;
        height: 40px;
        display: flex;
        cursor: pointer;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
        transition-duration: .5s;
    }
    .toggle .bars{
        width: 100%;
        height: 4px;
        background-color: rgb(176, 92, 255);
        border-radius: 4px;
        /* position: absolute; */
    }
    #bar1,#bar3{
        width: 70%;
    }
    #bar2{
        transition-duration: .8s; 
    }
    #checkbox:checked + .toggle .bars{
        /* 使得在选中checkbox时,通过绝对定位将.bars的堆在中间，此时bar在旋转的时候就会在盒子区域内而且（旋转原点是bar的中心点） */
        position: absolute;
        transition-duration: .5s;
    }
    #checkbox:checked + .toggle #bar2{
        transform: scaleX(0);
        transition-duration: .5s;
    }
    #checkbox:checked + .toggle #bar1{
        width: 100%;
        transform: rotate(45deg);
        
    }
    #checkbox:checked + .toggle #bar3{
        width: 100%;
        transform: rotate(-45deg);
        
    }
    #checkbox:checked + .toggle{
        transform: rotate(180deg);
        transition-duration: .5s;
    }
</style>
<body>
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="toggle">
        <div class="bars" id="bar1"></div>
        <div class="bars" id="bar2"></div>
        <div class="bars" id="bar3"></div>
    </label>
    
</body>
</html>